<template>
  <div class="wrap">
    <div class="logo">
      <img src="@/assets/img/login.webp" alt />
      <p>欢迎来到爱课</p>
    </div>
    <div class="phone">
      <input type="text" @blur="onblur" v-model="value" placeholder="请输入手机号码" />
      <span></span>
    </div>
    <div class="yz">
      <input type="text" placeholder="请输入验证码" v-model="verification" />
      <van-button class="btn" round size="small" type="primary" @click="yz">获取验证码</van-button>
    </div>
    <van-button class="login" round type="primary" @click="consistent">登录/注册</van-button>
    <img class="beij" src="@/assets/img/beij.webp" alt />
  </div>
</template>

<script>
import { ref } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";

export default {
  setup() {
    const yzresult = ref("");
    const router = useRouter();
    const value = ref("");
    const verification = ref("");
    const onblur = () => {
      console.log(value.value);
      return value.value;
    };
    const down = () => {
      fetch("http://118.31.35.160:4000/user/register", {
        method: "post",
        headers: new Headers({
          "Content-Type": "application/json"
        }),
        body: JSON.stringify({ phone: `${value.value}` })
      })
        .then(res => res.json())
        .then(res => {
          if (res.results && value.value === res.results[0].phone) {
            localStorage.setItem("token", res.token);
            localStorage.setItem("user", value.value);
            router.push("/home/index");
          } else {
            Toast("注册成功");
            localStorage.setItem("user", value.value);
            localStorage.setItem("token", res.token);
            router.push("/home/index");
          }
        });
    };
    const yz = async () => {
      const reg = /^1[356879]\d{9}$/;
      if (value.value.trim() !== "") {
        if (reg.test(value.value)) {
          const yaz = await fetch("http://118.31.35.160:4000/user/captcha");
          const yazresult = await yaz.json();
          yzresult.value = yazresult.num;
          Toast(yazresult.num);
        } else {
          value.value = "号码格式不对";
          setTimeout(() => {
            value.value = "";
          }, 1000);
        }
      } else {
        value.value = "手机号码不能为空";
        setTimeout(() => {
          value.value = "";
        }, 1000);
      }
    };
    const consistent = () => {
      if (Number(verification.value) === Number(yzresult.value)) {
        down();
      } else {
        Toast("验证码有误");
      }
    };
    return {
      value,
      onblur,
      yz,
      verification,
      consistent
    };
  }
};
</script>
<style lang="scss" scoped>
.logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  margin-top: 100px;
  margin-left: 38px;
}
img {
  width: 40px;
  height: 40px;
}
.phone {
  width: 300px;
  height: 54px;
  border: 1px solid #f5f5f5;
  margin: 0 auto;
  margin-top: 50px;
  border-radius: 26px;
  background: #f5f5f5;
  span {
    display: inline-block;
    font-size: 14px;
  }
}
input {
  width: 130px;
  margin-left: -110px;
  font-size: 16px;
  outline: none;
  border: none;
  background: #f5f5f5;
  line-height: 50px;
}
.yz {
  position: relative;
  width: 300px;
  height: 54px;
  border: 1px solid #f5f5f5;
  margin: 0 auto;
  border-radius: 26px;
  margin-top: 15px;
  background: #f5f5f5;
  .btn {
    position: absolute;
    top: 11px;
    right: 10px;
  }
}
.login {
  width: 300px;
  height: 50px;
  margin-top: 40px;
  font-size: 18px;
}
.beij {
  margin-top: 78px;
  display: block;
  width: 100%;
  height: 170px;
}
</style>
